import React from 'react';
import {
    CloseOutlined,
    InfoCircleOutlined
} from '@ant-design/icons';
import { Button } from 'antd'


interface Info {
    headTitle:string;
    bodyTitle:string;
    bodyContent:string;
}
interface Props {
    setShow: React.Dispatch<React.SetStateAction<boolean>>
    callBack: ()=>void,
    info: Info,
    show: boolean
}

const Message = (props: Props) => {
    return (
        <div>
            {props.show && <div className='position-absolute z-10  w-[100%] h-[100%] top-0'>
                <div className='bg-[rgba(0,0,0,0.5)]  w-[100%] h-[100%] position-absolute z-10 top-0'
                    onClick={() => { props.setShow(false) }}
                >
                </div>
                <div className='w-[450px] z-20 h-[210px] bg-white position-absolute top-[50%] left-[50%] mt-[-105px] ml-[-225px] ' >
                    {/* 头部 */}
                    <div className='flex justify-between items-center p-[15px]'>
                        <div className='color-coolgray-6 font-[12px]'>{props.info.headTitle}</div>
                        <div className='cursor-pointer'><CloseOutlined onClick={() => { props.setShow(false) }} /></div>
                    </div>
                    {/* 内容信息 */}
                    <div className='h-[110px] w-[100%] border-b-[1px] border-b-coolgray-3 border-b-solid flex ' >
                        <div className='w-[380px] m-auto flex'>
                            <div className='mr-3'><InfoCircleOutlined style={{ fontSize: '28px', color: 'rgb(254,148,0)' }} /></div>
                            <div >
                                <div className='fw-700 line-height-[22px] text-coolGray-5'>{props.info.bodyTitle}</div>
                                <div className='font-size-[12px] line-height-[22px] '>{props.info.bodyContent}</div>
                            </div>
                        </div>

                    </div>
                    {/* 底部 */}
                    <div className='poistion-relative'>

                        <div className='position-absolute  bottom-[10px] right-[15px]'>
                            <Button className='rounded-1 m-l-[10px] border-[1px] border-coolgray border-solid'
                                onClick={() => {
                                    props.setShow(false)
                                }
                                }

                            >取消</Button>
                            <Button type='primary' className='rounded-1 m-l-[10px]'
                                onClick={() => {
                                    props.callBack()
                                    props.setShow(false)

                                }}
                            >确定</Button>
                        </div>

                    </div>
                </div>
            </div>}
        </div>
    );
};

export default Message;